<template>
    <div>
        <div class="add_metadata_outside_border">
            <div class="add_metadata_left">计算公式</div>
            <div style="display:flex;justify-content: space-around;margin: 15px">
                <el-input type="textarea" class="input-border-style" id="number_input" v-model="number_input" :readonly="true" />
                <el-tooltip class="item" effect="dark" content="回删：默认删除最后一个元素" placement="right">
                    <el-button type="danger" style="margin: 0 10px;" @click="number_input_delete" plain>回删</el-button>
                </el-tooltip>
            </div>
            <!--实现新增统计指标弹窗计算公式的按钮方法-->
            <div>
                <el-button size="mini" class="add_metadata_right_outside_button"
                    v-for="item in [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]" :key="item" @click="calc(item)">
                    <span class="add_metadata_compute_number">{{ item }}</span>
                </el-button>
                <br />
                <el-button size="mini" class="add_metadata_right_outside_button"
                    v-for="item in ['(', ')', '+', '-', '*', '/']" :key="item" @click="calc(item)">
                    <span class="add_metadata_compute_number">{{ item }}</span>
                </el-button>
                <br />
                <el-button size="mini" class="add_metadata_right_outside_cell_button"
                    v-for="item in inputData" :key="item" @click="calc(item)">
                    <span class="add_metadata_compute_number">{{ item }}</span>
                </el-button>
                <br />
                <el-tooltip class="item" effect="dark" content="运算公式：以行为单位进行计算" placement="bottom">
                    <el-button type="primary" class="clear_compute" @click="count_compute_btn" plain>运算规则</el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="加载规则：进度新增必填项" placement="bottom">
                    <el-button type="warning" class="clear_compute" @click="loading_compute_btn" plain :disabled="disableSave">保存规则</el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="清空规则：清空所选规则" placement="bottom">
                    <el-button type="danger" class="clear_compute" @click="clear_compute_btn" plain>清空规则</el-button>
                </el-tooltip>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 存放新增统计指标弹窗等式右边元素的添加按钮数据
            inputData: [],
            // 存放新增统计指标计算公式输入框的值
            number_input: '',
            // 新增统计指标弹窗等式右边元素的下拉框默认隐藏
            add_metadata_inside_select: false,
            // 新增添加指标弹窗等式右边元素的下拉框
            addMetadataSelect: [],
            // 控制保存规则是否可用
            disableSave: true
        }
    },
    methods: {
        // 新增统计指标弹窗计算公式的回删功能
        number_input_delete() {
            this.number_input = this.number_input.replace(/.$/, '')
        },
        // 实现新增统计指标弹窗计算公式的按钮方法
        calc(number) {
            this.number_input = this.number_input + number
        },
        // 实现新增统计指标弹窗计算公式的清空计算公式的按钮实现
        clear_compute_btn() {
            this.number_input = ''
            this.loading_compute_btn()
        },
        // 保存规则
        loading_compute_btn() {
            this.$emit('loadingComputeBtn_', this.number_input)
        },
        // 运算规则
        count_compute_btn() {
            this.$emit('countComputeBtn_', this.number_input)
        }
    }
}
</script>

<style>
/*设置新增添加指标弹窗的表格外边框样式*/
.add_metadata_outside_border {
    border: 1px solid #c7c6c6;
    border-radius: 5px
}

/*设置新增添加指标弹窗的表格等式左边元素的样式*/
.add_metadata_left {
    background-color: #f5f1f1;
    height: 40px;
    padding: 10px;
    border-radius: 5px
}

/*设置新增统计指标弹窗的计算公式按钮外部的样式*/
.add_metadata_right_outside_button {
    background: rgb(64, 142, 186);
    width: 20px;
    margin: 10px 13px;
}

/*设置新增统计指标弹窗的计算公式的按钮*/
.add_metadata_compute_number {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white
}

/*设置新增统计指标弹窗的计算公式的清空计算公式的样式*/
.clear_compute {
    width: 29%;
    margin: 12px
}

/*设置新增统计指标弹窗的等式右边元素添加按钮的样式*/
.add_metadata_right_button {
    margin: 0 5px;
    background: rgb(64, 142, 186);
    width: 20px;
}

/*设置新增统计指标弹窗的等式右边元素下拉框的外部样式的样式*/
.add_metadata_inside_right_input {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px;
}

/*设置新增添加指标弹窗的表格等式右边元素的样式*/
.add_metadata_right {
    background-color: #f5f1f1;
    height: 50px;
    padding: 10px
}

/*设置新增统计指标弹窗的计算公式按钮cell的样式*/
.add_metadata_right_outside_cell_button {
    background: rgb(64, 142, 186);
    /* width: 50px; */
    margin: 10px 13px;
}
</style>